<template>
	<gui-page>
		<template v-slot:gBody>
			<cardHeader :title="`智能设备产品信息卡片(共${total}个)`"></cardHeader>
			<view v-for="(item, index) in items" :key="item.id"
				class="gui-card-view gui-bg-white gui-dark-bg-level-3 gui-margin-top gui-box-shadow">
				<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap">
					<image mode="aspectFill" :src="item.img" class="gui-card-img"></image>
					<view class="gui-card-desc">
						<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
							<text class="gui-card-name gui-primary-text">{{item.mc}}</text>
							<text class="gui-text-small gui-primary-color">{{item.ptype}}</text>
						</view>
						<text class="gui-card-text gui-block gui-secondary-text"
							style="margin-top:10rpx;">{{item.descption}}</text>
						<text class="gui-card-text gui-block gui-third-text">{{item.proto}}</text>
					</view>
				</view>
				<view class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
					<text class="gui-icons gui-color-gray gui-card-footer-item gui-border-r"
						@tap="gotoproductinfo(item)">&#xe608; 产品详情</text>
					<text class="gui-icons gui-color-gray gui-card-footer-item gui-border-r"
						@tap="gotodevices(item)">&#xe613; 设备列表({{item.devcount}})</text>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {ref,getCurrentInstance,createApp} from 'vue'
	import cardHeader from "@/lib/components/card-header.vue"
	import guiPage from "@/Grace6/components/gui-page.vue"
	import ybmethod from "@/lib/js/ybmethod.js"
	import ybgolbal from '../../lib/js/ybgolbal';
	import { onShow,onPullDownRefresh } from '@dcloudio/uni-app'
	const ybapi = ybgolbal.getybapi(getCurrentInstance());
	const app = createApp();
	let items = ref([]);
	let total = ref(0);
	
	onShow(()=>{
	    console.log("进入产品页面");
		getData();
	})
	
	onPullDownRefresh(()=>{
		ybmethod.onPullDownRefresh(getData)
	})
	
	function getData(){
		ybapi.Devices_GetMyProducts(function(data){
			items.value = data.items;
			total.value = data.total;
			console.log(items.value.length)
			console.log(items.value)
			for (var i = 0; i < items.value.length; i++) {
				console.log(items.value[i].img)
				if(items.value[i].img){}
				else{
					items.value[i].img = "https://sky-yiho.com/sb.png";
				}
			}
		}, function(e){
			console.log(e);
		});
	}
	
	function gotodevices(item){
		console.log(item);
		// 跳转设备页面
		uni.navigateTo({
			url: "/pages/devices/devices?productid=" + item.id + "&mc=" + item.mc,
		});
	}
	
	function gotoproductinfo(item){
		console.log("跳转产品详情页");
		console.log(item);
		// 跳转产品详情页面
		uni.navigateTo({
			url: "/pages/productinfo/productinfo?productid=" + item.id + "&mc=" + item.mc,
		});
	}
	
	app.component({
		guiPage,
		cardHeader
	})
	
</script>

<style>
	@import "../../lib/css/ybcard.css";     
</style>
